<template>
  <div>
    <a-menu
      v-model:selectedKeys="selectedKeys"
      :items="items"
      mode="inline"
    >
      <!-- <a-menu-item v-for="item in 16" :key="item" key="item">
          <FileOutlined />
          <span>nav 1</span>
        </a-menu-item> -->
    </a-menu>
  </div>
</template>
<script setup>
import { h, reactive,onMounted } from "vue";
import useStore from '@/store/index'
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";

// danger	展示错误状态样式
// disabled	是否禁用
// icon	菜单图标
// key	item 的唯一标志
// label	菜单项标题
// title	设置收缩时展示的悬浮标题
const items = reactive([
  {
    label: "文件",
    key: "sub1",
    icon: h(FileOutlined, { class: "ant-style-icon" }),
  },
  {
    label: "Navigation Two",
    key: "sub2",
    icon: h(AppstoreOutlined, { class: "ant-style-icon" }),
  },
]);
onMounted(() => {
 let store = useStore()
});
const onOpenChange = (openKeys) => {
  const latestOpenKey = openKeys.find(
    (key) => state.openKeys.indexOf(key) === -1
  );
  if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    state.openKeys = openKeys;
  } else {
    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
  }
};
</script>
